import { h } from 'vue';

import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { Button, Image,Input,Switch,Select } from 'ant-design-vue';

import { useVbenForm } from './form';

setupVbenVxeTable({
  configVxeTable: (vxeUI) => {
    vxeUI.setConfig({
      grid: {
        align: 'center',
        border: false,
        columnConfig: {
          resizable: true,
        },
        minHeight: 180,
        formConfig: {
          // 全局禁用vxe-table的表单配置，使用formOptions
          enabled: false,
        },
        proxyConfig: {
          autoLoad: true,
          response: {
            result: 'items',
            total: 'total',
            list: 'items',
          },
          showActiveMsg: true,
          showResponseMsg: false,
        },
        round: true,
        showOverflow: true,
        size: 'small',
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellImage' },
    vxeUI.renderer.add('CellImage', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        return h(Image, { src: row[column.field] });
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellLink' },
    vxeUI.renderer.add('CellLink', {
      renderTableDefault(renderOpts) {
        const { props } = renderOpts;
        return h(
          Button,
          { size: 'small', type: 'link' },
          { default: () => props?.text },
        );
      },
    });


    // 表格配置项可以用 cellRender: { name: 'iconRender' },
    vxeUI.renderer.add('IconRender', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        return h("span", { class: row[column.field] });
      },
    });

    // 注册自定义超链接渲染器
    vxeUI.renderer.add("CellInput", {
      renderEdit(_renderOpts, params) {
        const { column, row } = params;
        return h(
          Input,
          {
            value: row[column.field], // 绑定初始值
            placeholder: row.placeholder || `请输入${column.title}`, // 动态 placeholder
            style: "width: 100%;text-align: center;",
            onChange: (event) => {
              row[column.field] = event.target.value; // 监听输入并更新 row 数据
            },
          },
        );
      }
    });

    vxeUI.renderer.add("CellSelect", {
      renderEdit(_renderOpts, params) {
        const { column, row } = params;

        return h(Select, {
          modelValue: row[column.field], // 确保双向绑定生效
          "onUpdate:modelValue": (value) => {
            row[column.field] = value; // 让数据响应式更新
          },
          placeholder: row.placeholder || `请选择${column.title}`,
          style: "width: 100%; text-align: center;",
          options: column.options || [
            { label: "启用", value: "true" },
            { label: "禁用", value: "false" }
          ],
        });
      },
    });

    vxeUI.renderer.add("CellSwitch", {
      renderEdit(renderOpts, { row, column }) {
        return h(Switch, {
          checked: row[column.field], // 绑定值
          "onUpdate:checked": (checked) => {
            row[column.field] = checked; // 更新数据
          },
        });
      },
    });


    // 注册自定义超链接渲染器
    vxeUI.renderer.add("LinkRender", {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        const text = row[column.field] || "点击这里";

        return h(
          "a",
          {
            href: "javascript:void(0);",
            style: "color: #007bff; text-decoration: none; cursor: pointer;",
            onMouseover: (e: Event) => (e.target as HTMLElement).style.color = "#56a7ff", // 鼠标悬浮变色
            onMouseout: (e: Event) => (e.target as HTMLElement).style.color = "#007bff", // 鼠标离开恢复颜色
          },
          text
        );
      }
    });
    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
    // vxeUI.formats.add
  },
  useVbenForm,
});

export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';
